<template>
    <div class="chat-wrapper">
        <div
            style="display: flex;justify-content: flex-end;padding-right: 10px;padding-top: 5px;height: 65px">
            <div @click="pinChat" v-bind:class="{pined:this.$attrs.pin}" class="chat-smallbutton">
                <svg t="1626593489221" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="2685" width="20" height="20">
                    <path
                        d="M629.76 64l-58.24 23.04V224L352.64 382.08a197.12 197.12 0 0 0-106.24-17.92 192 192 0 0 0-98.56 40.96v46.72l181.76 176.64L61.44 896h97.28l220.16-220.16 159.36 155.52h48.64a179.84 179.84 0 0 0 23.04-198.4l163.2-212.48h140.8l23.68-56.32L629.76 64z m128 289.92l-27.52 13.44-183.68 240-3.84 32.64a166.4 166.4 0 0 1 14.72 114.56l-128-128-48.64-47.36L230.4 432.64a182.4 182.4 0 0 1 117.76 14.72l33.92-3.84 247.04-178.56 13.44-26.24V165.12l192 186.88-76.8 1.92z"
                        p-id="2686"></path>
                </svg>
            </div>
            <div @click.stop="closeChat" class="chat-smallbutton">
                <svg t="1626593705389" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="3499" width="22" height="22">
                    <path
                        d="M551.424 512l195.072-195.072c9.728-9.728 9.728-25.6 0-36.864l-1.536-1.536c-9.728-9.728-25.6-9.728-35.328 0L514.56 475.136 319.488 280.064c-9.728-9.728-25.6-9.728-35.328 0l-1.536 1.536c-9.728 9.728-9.728 25.6 0 36.864L477.696 512 282.624 707.072c-9.728 9.728-9.728 25.6 0 36.864l1.536 1.536c9.728 9.728 25.6 9.728 35.328 0L514.56 548.864l195.072 195.072c9.728 9.728 25.6 9.728 35.328 0l1.536-1.536c9.728-9.728 9.728-25.6 0-36.864L551.424 512z"
                        fill="#2C2C2C" p-id="3500"></path>
                </svg>
            </div>
        </div>
        <div style="position: absolute;top:15px;left: 20px;font-size: 20px;">
            Messages
        </div>
        <div style="position: relative">
            <transition :name="type==='enter'?'entry':'back'">
                <ChatMain :userList="userList" v-on:togglePage="togglePage" v-on:setChatRoomData="setChatRoomData"
                          class="chatmain"
                          v-bind="$attrs" v-on="$listeners"
                          v-if="page==='chatmain'"/>
                <ChatRoom :unread="unread" ref="chatroom" v-on:togglePage="togglePage" v-bind="$attrs" v-on="$listeners" :chatinfo="chatRoomData"
                          class="chatroom"
                          v-if="page==='chatroom'"/>
            </transition>
        </div>


    </div>
</template>

<script>
import ChatRoom from "@/components/Chat/ChatRoom";
import ChatMain from "@/components/Chat/ChatMain";

export default {
    name: "Chat",
    props: ['userList','unread'],

    components: {ChatMain, ChatRoom},
    data() {
        return {
            page: 'chatmain',
            type: 'enter',
            chatRoomData: []
        }
    },
    methods: {
        togglePage(toPage, type) {
            this.page = toPage
            this.type = type
        },
        closeChat() {
            this.$emit("closeChat")
        },
        pinChat() {
            this.$emit("togglePin")
        },
        setChatRoomData(item) {
            const data = JSON.parse(JSON.stringify(item))
            this.chatRoomData = data
            console.log(data)

        },
        receiveMessage(msg) {
            this.$refs.chatroom.receiveMessage(msg)
        },

    },
    mounted() {
        this.$attrs.currentUserId = 1
        console.log("chat attrs", this.$attrs.currentUserId)

    }

}
</script>

<style scoped>
.chat-wrapper {
    height: 100%;
    position: relative;
    overflow-x: hidden;
    background-color: #f8f8fb;
}

.chatroom {
    position: absolute;

    left: 0;

    height: 100%;

}

.chatmain {
    position: absolute;
    width: 500px;
    left: 0;
    height: 100%;

}

@keyframes show-enter {
    0% {
        opacity: 1;
        left: 500px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes hide-enter {
    0% {
        opacity: 1;
        left: 0;
    }
    100% {
        opacity: 1;
        left: -500px;
    }
}

.entry-enter-active {
    animation: show-enter 300ms;
}

.entry-leave-active {
    animation: hide-enter 300ms;
}

.entry-enter, .entry-leave-to {
    opacity: 0;
}

@keyframes show-back {
    0% {
        opacity: 1;
        left: -500px;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}

@keyframes hide-back {
    0% {
        opacity: 1;
        left: 0;
    }
    100% {
        opacity: 1;
        left: 500px;
    }
}

.back-enter-active {
    animation: show-back 300ms;
}

.back-leave-active {
    animation: hide-back 300ms;
}

.back-enter, .back-leave-to {
    opacity: 0;
}

.chat-smallbutton {
    height: 25px;
    width: 25px;
    padding: 2px;
    margin-left: 10px;
    transition: all ease-in-out 300ms;
    cursor: pointer;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.chat-smallbutton:hover {

    background-color: #c9c9c9;

}

.chat-smallbutton:active {
    background-color: #aca5a5;
}

.pined {
    background-color: #6DBEF8;

}
</style>